<template>
  <div>
    <div>
      <el-input v-model="filterText" placeholder="输入部门名称进行搜索"/>
      <el-tree
          ref="tree"
          class="filter-tree"
          :data="deps"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-node">
            <div>{{ data.name }}</div>
            <div style="display: flex;justify-content: flex-end">
              <el-button @click="append(data)" type="primary" size="mini" class="dep-btn">添加部门</el-button>
              <el-button @click="remove(node,data)" type="danger" size="mini" class="dep-btn">删除部门</el-button>
            </div>
          </div>
        </template>
      </el-tree>
      <el-dialog v-model="dialogFormVisible" title="添加部门">
        <div class="dep-info-box">
          <div>
            <el-tag style="margin-right: 10px">上级部门</el-tag>
            <span>{{ pName }}</span>
          </div>
          <div style="display: flex;justify-content: flex-start;align-items: center;margin-top: 10px">
            <el-tag style="margin-right: 10px">部门名称</el-tag>
            <el-input v-model="newDep.name" autocomplete="off" size="small" placeholder="输入新部门名称"></el-input>
          </div>
        </div>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="this.dialogFormVisible=false">取消</el-button>
          <el-button type="primary" @click="confirmUpdate">确定</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {deleteRequest, getRequest, postRequest} from "@/utils/api";
import {ElMessage, ElMessageBox} from "element-plus";

let id = 1000
export default {
  name: "DepManage",
  created() {
    this.initDeps();
  },
  data() {
    return {
      filterText: '',
      deps: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      newDep: {
        name: '',
        parentId: ''
      },
      pName: '',
      dialogFormVisible: false,
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    initDeps() {
      getRequest('/system/basic/department/').then(res => {
        if (res) {
          this.deps = res;
        }
      })
    },
    append(data) {
      this.pName = data.name;
      this.newDep.parentId = data.id;
      this.dialogFormVisible = true;
    },

    remove(node, data) {
      ElMessageBox.confirm(
          '此操作将永久删除本个部门，是否继续？',
          'Warning',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            if (data.isParent) {
              ElMessage.error('该部门下有子部门，不可直接删除');
            } else {
              deleteRequest('/system/basic/department/' + data.id).then(res => {
                if (res) {
                  this.initDeps();
                }
              })
            }
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '取消操作',
            })
            this.initJoblevel();
          })

    },
    confirmUpdate() {
      if (this.newDep.name && this.newDep.parentId) {
        postRequest('/system/basic/department/', this.newDep).then(res => {
          if (res) {
            this.initDeps();
            this.newDep.name = '';
            this.newDep.parentId = '';
            this.dialogFormVisible = false;
          }
        })
      } else {
        ElMessage.error('所有字段不能为空');
      }
    }
  }
}
</script>

<style scoped>
.filter-tree {
  margin-top: 15px;
}

.custom-tree-node {
  width: 100%;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.custom-tree-node .dep-btn {
  box-sizing: border-box;
  padding: 2px;
}
</style>
